<template>
    <div>
        <!-- 懒加载样式的全部使用需要全部加载，按需加载不能完全实现 -->
        <ul class="mui-table-view">
            <li class="mui-table-view-cell mui-media" v-for="item in list" :key="item">
               <img v-lazy="item">
            </li>
        </ul>
    </div>
</template>

<script>
import Vue from 'vue'
import { Lazyload } from 'mint-ui';

Vue.use(Lazyload);

export default {
    data(){
        return {
            msg: '我是模版组件',
            list: [
                'http://fuss10.elemecdn.com/b/18/0678e57cb1b226c04888e7f244c20jpeg.jpeg',
                'http://fuss10.elemecdn.com/3/1e/42634e29812e6594c98a89e922c60jpeg.jpeg',
                'http://fuss10.elemecdn.com/1/c5/95c37272d3e554317dcec1e17a9f5jpeg.jpeg',
                'http://fuss10.elemecdn.com/7/85/e478e4b26af74f4539c79f31fde80jpeg.jpeg',
                'http://fuss10.elemecdn.com/b/df/b630636b444346e38cef6c59f6457jpeg.jpeg',
                'http://fuss10.elemecdn.com/7/a5/596ab03934612236f807b92906fd8jpeg.jpeg'
            ]
        }
    },
    created(){

    },
    mounted(){
        
    },
    methods:{
        
    }
}
</script>

<style lang="scss" scoped>
img{
    width: 100%;
}
img[lazy=loading] {
  width: 40px;
  height: 300px;
  margin: auto;
}
</style>